import React, { Component } from 'react'
import './app.css';
import CommentAdd from '../comment-add/comment-add';
import CommentList from '../comment-list/comment-list';
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            commentArr:[
                {username:"张三",content:"你是李思马"},
                {username:"李四",content:"我找王五"},
                {username:"王五",content:"你俩谁啊"}
            ]
        }
        this.addcomment = this.addcomment.bind(this)
        this.delcomment = this.delcomment.bind(this)
        
    }
    addcomment(comment){
        const { commentArr } = this.state
        commentArr.unshift(comment);
        this.setState({commentArr})
    }
    delcomment(index){
        const { commentArr } = this.state
        commentArr.splice(index,1);
        this.setState({commentArr})
    }
    
    render() {
        return (
            <div>                
                <header className="site-header jumbotron">
                    <div className="container">
                        <div className="row">
                            <div className="col-xs-12">
                                <h1>请发表对React的评论</h1>
                            </div>
                        </div>
                    </div>
                </header>
                <div className="container">
                    <CommentAdd addcomment = {this.addcomment}  ></CommentAdd>
                    <CommentList commentArr={this.state.commentArr} delcomment = {this.delcomment} ></CommentList>
                </div>
            </div>
        )
    }
}

export default App
